<template>
  <div>
    <el-card class="tree-card">
      <!-- <el-row type="flex" justify="space-between">
      <el-col>
        <span :span="12">传智</span>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" justify="end">
          <el-col>
            <span>负责人</span>
          </el-col>
          <el-col>
            <el-dropdown>
              <span>操作 <i class="el-icon-bottom" /> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-col>
    </el-row> -->
      <TreeTool :tree-node="company" :is-company="true" @addEvent="add" />
      <!-- is-company="true"的意思是，选择这个属性，这个属性的默认值是false，默认不显示，所以为true就是不显示 -->
      <!-- 树形结构 -->
      <div>
        <!-- <h1>树形结构</h1> -->
        <!--
      data: 传入需要渲染的数据
      label: 值就是渲染到浏览器中的数据
      children：所有的字节点需要通过children进行渲染

      props: 用于修改一些默认值
        label: 可以通过这个属性把默认的渲染的属性名改为其他名字

      default-expand-all: 是否默认展开所有节点, true表示展开
      -->
        <el-tree
          :data="treedata"
          :props="{label:'name'}"
          default-expand-all=""
        >
          <!-- v-slot="{data}"指令里面的data是tree组件通过作用域插槽
        传递给我们使用的，data名字是tree组件规定的，不能随便写的。{}
        那我们如何知道tree组件传了data给我们呢？
        答：看tree组件的文档 -->
          <!-- data不是treedata -->
          <template v-slot="{data}">
            <TreeTool :tree-node="data" @addEvent="add" @delEvent="del" @editEvent="edit" />
          </template>
        </el-tree></div>
    </el-card>
    <!-- 新增部门弹窗 -->
    <!-- <AddDept :show-dialog="showDialog" @closeEvent="showDialog=false" /> -->
    <AddDept ref="depts" :show-dialog.sync="showDialog" :cur-dept="curDeptData" @update="getDepartment" />
    </adddept></div>

</template>

<script>
import TreeTool from './components/tree-tool.vue'
import { getDepartment, delDepartment } from '../../api/department'
import AddDept from './components/add-dept'
import { listtotree } from '../../utils/index'
export default {
  components: {
    TreeTool,
    AddDept
  },
  data() {
    return {
      company: {
        name: '传智教育',
        manager: '负责人',
        id: '' // 实现添加一级部门
      },
      treedata: [{
        name: '总裁办',
        manager: '管理员'
      }, {
        name: '技术部',
        manager: '小明',
        children: [{
          name: '前端研发部',
          manager: '小芳'
        }, {
          name: 'java研发部',
          manager: '小田'
        }]
      }],
      showDialog: false,
      curDeptData: {}

    }
  },
  async  created() {
    this.getDepartment()// 渲染组织架构
  },
  methods: {
    async  getDepartment() {
      const res = await getDepartment()
      // console.log('res: ', res)
      this.company.name = res.companyName
      this.treedata = listtotree(res.depts, '')
    },

    add(treeNode) {
      this.showDialog = true
      this.curDeptData = treeNode
      // console.log('curDeptData: ', curDeptData)
      this.$refs.depts.getDepartment()
    },
    del(id) {
      // console.log(id)
      this.$confirm('是否删除', '温馨提示', {
        type: 'warming'
      }).then(async() => {
        // 调用接口，删除数据
        await delDepartment(id)
        // 刷新列表
        this.getDepartment()
      }).catch(err => {
        console.log('点击了取消', err)
      })
    },
    edit(treeNode) {
      this.add(treeNode)
      this.$nextTick(() => {
        this.$refs.depts.getDepartmentDetial()
      })
    }
  }
}
</script>

<style>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
